<template>
  <view class="kline-tabs-container" :class="{ darkStyle: theme == 'dark' }">
    <view class="kline-tabs-wrap">
      <view
        class="kline-tab-item"
        v-for="(item, index) in list"
        :key="index"
        :data-current="index"
        :data-value="item.value"
        @click="onKlineTabClick"
        :class="{ active: index == current }"
      >
        <view class="kline-tab-label">
          {{ item.text }}
        </view>
      </view>
      <view class="kline-tabs-fixed-wrpas">
        <view class="kline-tab-item has-sub" @click.stop="showMore">
          <view class="kline-tab-label">
            <span class="label" :class="{ active: subCurrent.text }">{{
              subCurrent.text || "More"
            }}</span>
            <u-icon
              class="arrow"
              name="arrow-down-fill"
              :size="arrowSize"
            ></u-icon>
          </view>

          <view class="kline-tab-more-wrap" v-if="isMoreShow">
            <view
              class="kline-tab-more-item"
              hover-class="kline-tab-more-item-hover"
              hover-stay-time="50"
              v-for="(moreItem, moreIndex) in subItem"
              :data-value="moreItem.value"
              :data-current="moreIndex"
              @click="onSubTabClick"
              :key="moreIndex"
            >
              <span class="kline-more-label">{{ moreItem.text }}</span>
            </view>
          </view>
        </view>
        <view class="kline-tab-item has-sub" @click="showIndex">
          <view class="kline-tab-label">
            <span class="label">Index</span>
            <u-icon
              class="arrow"
              name="arrow-down-fill"
              :size="arrowSize"
            ></u-icon>
          </view>

          <view class="kline-tab-index-wrap" v-if="isIndexShow">
            <view class="kline-tab-index-item">
              <view class="kline-index-label">Main Map</view>
              <view class="kline-index-main">
                <view
                  class="kline-index-text"
                  hover-class="hover"
                  :class="{ active: indexActive == 0 }"
                  :data-current="0"
                  @click.stop="onIndexClick"
                  hover-stay-time="50"
                >
                  MA
                </view>
                <view
                  class="kline-index-text"
                  hover-class="hover"
                  :class="{ active: indexActive == 1 }"
                  :data-current="1"
                  @click.stop="onIndexClick"
                  hover-stay-time="50"
                >
                  BOLL
                </view>
              </view>
              <view class="kline-index-eye-wrap" @click.stop="onIndexEyeClick">
                <u-icon
                  name="eye-fill"
                  :color="indexSelect ? '#FD5B2C' : '#c3c3cd'"
                  size="40"
                ></u-icon>
              </view>
            </view>
            <!--            <view class="kline-tab-index-item">
              <view class="kline-index-label"
              >
                Vice map
              </view>
              <view class="kline-index-main">
                <view class="kline-index-text"
                      hover-class="hover"
                      hover-stay-time="50">
                  MACD
                </view>
                <view class="kline-index-text"
                      hover-class="hover"
                      hover-stay-time="50">
                  KDJ
                </view>
                <view class="kline-index-text"
                      hover-class="hover"
                      hover-stay-time="50">
                  RSI
                </view>
                <view class="kline-index-text"
                      hover-class="hover"
                      hover-stay-time="50">
                  WR
                </view>
              </view>
              <view class="kline-index-eye-wrap">
                <u-icon name="eye"></u-icon>
              </view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "KlineTabs",
  data() {
    return {
      current: 0,
      subMoreCurrent: 0,
      arrowSize: "20",
      isMoreShow: false,
      isIndexShow: false,
      indexSelect: true,
      indexActive: 0, // default is MACD
      list: [
        // default 5 items
        {
          text: "1min",
          value: "1",
        },
        {
          text: "5min",
          value: "5",
        },
        {
          text: "30min",
          value: "30",
        },
        {
          text: "1hour",
          value: "60",
        },
        {
          text: "1D",
          value: "1D",
        },
      ],
      subItem: [
        {
          text: "1week",
          value: "1W",
        },
        {
          text: "1mon",
          value: "1M",
        },
        // {
        //   text: '5min',
        //   value: '5'
        // },
        // {
        //   text: '4h',
        //
        // },
        // {
        //   text: '6h',
        // },
        // {
        //   text: '12h',
        // },
        // {
        //   text: '1w',
        // },
      ],
    };
  },
  computed: {
    subCurrent() {
      if (
        this.$u.test.isEmpty(this.subMoreCurrent) ||
        this.$u.test.isEmpty(this.subItem)
      ) {
        return {};
      }
      return this.subItem[this.subMoreCurrent];
    },
  },
  methods: {
    onKlineTabClick(e) {
      const current = e.currentTarget.dataset.current;
      const value = e.currentTarget.dataset.value;
      this.current = current;
      this.subMoreCurrent = null;
      this.isMoreShow = false;
      this.isIndexShow = false;
      this.$emit("onTabClick", value);
    },
    onSubTabClick(e) {
      this.current = null; // 移除主导航的active
      const current = e.currentTarget.dataset.current;
      const value = e.currentTarget.dataset.value;
      this.subMoreCurrent = current;
      this.isIndexShow = false;
      this.$emit("onTabClick", value);
    },
    showMore() {
      this.isIndexShow = false;
      this.isMoreShow = !this.isMoreShow;
    },
    showIndex() {
      this.isMoreShow = false;
      this.isIndexShow = !this.isIndexShow;
    },
    clearAll() {
      this.isMoreShow = false;
      this.isIndexShow = false;
    },
    onIndexEyeClick() {
      this.indexSelect = !this.indexSelect;
      if (this.indexSelect) {
        this.indexActive = 0; // set default macd
      } else {
        this.indexActive = null;
      }
      this.$emit("onIndexChange", this.indexActive);
    },
    onIndexClick(e) {
      const current = e.currentTarget.dataset.current;
      if (this.indexActive == current) {
        this.indexActive = null;
        this.indexSelect = false;
        this.$emit("onIndexChange", this.indexActive);
        return;
      }
      this.indexActive = current;
      this.indexSelect = true;
      this.$emit("onIndexChange", current);
    },
  },
};
</script>

<style lang="less" scoped>
.kline-tabs-container {
  &.darkStyle {
    .kline-tabs-wrap {
      background-color: @bg-color-dark;
    }
  }
  .kline-tabs-wrap {
    font-size: 24rpx;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    background: @white;
    color: #696b6e;
    font-weight: bold;
    position: relative;
    .kline-tab-item {
      /*padding: 0 10rpx;*/
      height: 66rpx;
      line-height: 66rpx;
      text-align: center;
      // margin-right: 40rpx;
      &.has-sub {
        margin-right: 20rpx;
      }
      &:last-child {
        margin-right: 0;
      }
      /*&:first-child {*/
      /*  padding-left: 0;*/
      /*}*/
      &.active {
        color: @brand-color;
      }
      .kline-tab-label {
        .label {
          &.active {
            color: @brand-color;
          }
        }
      }
    }

    .kline-tabs-fixed-wrpas {
      display: flex;
      /*position: absolute;*/
      /*right: 0;*/
      .kline-tab-item {
      }
      .arrow {
        transform: scale(0.63);
        margin-left: 8rpx;
      }
    }
    .kline-tab-more-wrap {
      display: flex;
      flex-flow: row wrap;
      background-color: @white;
      position: absolute;
      left: 10rpx;
      right: 10rpx;
      bottom: -10rpx;
      transform: translateY(100%);
      padding: 10rpx;
      .kline-tab-more-item {
        width: 120rpx;
        &.kline-tab-more-item-hover {
          background-color: @bg-color-gray;
        }
      }
    }

    .kline-tab-index-wrap {
      position: absolute;
      left: 10rpx;
      right: 10rpx;
      bottom: -10rpx;
      transform: translateY(100%);
      padding: 10rpx;
      background-color: @white;
      padding: 0 30rpx;
      .kline-tab-index-item {
        display: flex;
        justify-content: space-between;
        .kline-index-label {
          flex: 0 0 auto;
          width: 200rpx;
        }
        .kline-index-main {
          flex: 1;
          display: flex;
          flex-flow: row wrap;
          .kline-index-text {
            width: 100rpx;
            &.active {
              color: @brand-color;
            }
          }
        }
        .kline-index-eye-wrap {
          flex: 0 0 auto;
          width: 200rpx;
          font-size: 30rpx;
        }
      }
    }
  }
}

.hover {
  background-color: @bg-color-gray;
}
</style>
